<template>
  <div class="bpl1-bg item4">
    <div class="tab">
      <div class="tab-item active">自建房分布图</div>
      <div class="tab-item">自建房隐患分布图</div>
      <div class="tab-item">地质灾害隐患点分布图</div>
      <div class="tab-item">切坡临坡建房分布图</div>
      <div class="tab-item">临时建筑分布图</div>
    </div>
    <div class="content">
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import Highcharts from 'highcharts/highstock'
import { CockpitApi } from '@/api/cockpit'
@Component({
  name: 'Item4'
})
export default class Item4 extends Vue {}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.bpl1-bg {
  width: 100%;
  height: 100%;
  padding: 16px;
  background: url('~@/assets/cockpit/subdivision/administration/item-bg4.png') no-repeat 0/ 100% 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tab {
  position: absolute;
  left: 32px;
  top: 32px;
  width: 168px;
  .tab-item {
    color: #fff;
    height: 32px;
    line-height: 32px;
    padding-left: 16px;
    margin-bottom: 3px;
    background: url('~@/assets/cockpit/subdivision/securityOneMap/item4-bg.png') no-repeat 0/ 100% 100%;
    &.active {
      background-color: darkblue;
      border: 1px solid #fff;
    }
  }
}
.content {
}
</style>
